import { useIntersectionObserver } from '@vueuse/core'
export default {
  install (app) {
    // directive
    app.directive('imgLazy', {
      // vue2 使用 inserted
      mounted (el, binding) {
        // el 绑定指令所在的元素    binding 指令传入的数据
        // console.log(el)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // 当组件出现在可视区域时  才对图片的src进行赋值
            if (isIntersecting) {
              // console.log('我进来了', binding)
              el.src = binding.value
              // 调接口之后需要取消监听
              stop()
            }
            // console.log(isIntersecting)
          }
        )
      }
    })
  }
}
